<template>
  <div class="all-container">
    <div class="body-container">
      <Product />
    </div>
    <div class="pager-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-size="16"
        layout="prev,total,jumper,slot,next"
        :total="24"
        prev-text="上一页"
        next-text="下一页"
      >
        <span>, 共2页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getShopData } from "@/api/getShopData";
import Product from "@/components/Product";
export default {
  data() {
    return {
      shopData: [],
    };
  },
  components: {
    Product,
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {},
  },
  async created() {
    this.shopData = await getShopData();
    console.log(this.shopData);
  },
};
</script>

<style scoped lang="less">
.all-container {
  display: flex;
  min-height: 870px;
  flex-direction: column;
  row-gap: 12px;
  align-items: center;
  .body-container {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 16px;
    justify-content: flex-start;
  }
  .pager-container span {
    flex: 0 0 auto;
    font-size: 13px;
    color: #606266;
    font-weight: 400;
    margin-left: 5px;
  }
}
</style>